<template>
  <div id="buttonPermission">
    <v-tableTitle title="菜单信息"></v-tableTitle>
    <div class="menu-tree">
      <el-card class="menu-tree-card base-card">
        <div slot="header">
          <span>{{ $t('security.authInfo') }}</span>
        </div>
        <el-input class="filter-input" :placeholder="$t('security.inputMenuNameSearch')" v-model="filterText" suffix-icon="el-icon-search">
        </el-input>
        <el-tree :style="`height:${height}` + 'px'" class="filter-tree" :data="treeData" node-key="id" :default-expanded-keys="defaultExpandedKeys" :props="defaultProps" accordion
          :filter-node-method="filterNode" ref="tree" @node-click="nodeClick">
        </el-tree>
        <!--   -->
      </el-card>
    </div>
    <div class="perDetail">
      <el-card class="base-card">
        <div slot="header">
          <span>{{ $t('security.authDetail') }}</span>
        </div>
        <div class="detail">
          <p><span style="margin-right:8px;">{{ $t('security.authCode') }}</span>{{ currentObj.code }}</p>
          <p><span style="margin-right:8px;">{{ $t('security.authName') }}</span>{{ currentObj.name }}</p>
          <p><span style="margin-right:8px;">{{ $t('security.authType') }}</span>{{
            currentObj.type == 10101 ? $t('security.menu') : currentObj.type == 10102 ? $t('security.button') : ''
          }}</p>
          <p><span style="margin-right:8px;">{{ $t('security.sortCode') }}</span>{{ currentObj.sortNum }}</p>
          <p><span style="margin-right:8px;">{{ $t('security.authDesc') }}</span>{{ currentObj.levelName }}</p>
          <p><span style="margin-right:11px;">{{ $t('security.authUrl') }}</span>{{ currentObj.url }}</p>
        </div>
      </el-card>
      <div class="btn">
        <el-button type="primary" :disabled="currentDisabled" @click="addMenu">添加同级菜单</el-button>
        <el-button type="primary" :disabled="currentDisabled" @click="addChildMenu">添加子级菜单</el-button>
        <el-button type="primary" :disabled="currentDisabled" @click="addBtn">添加按钮</el-button>
        <el-button :disabled="currentDisabled" @click="edit">{{ $t('security.update') }}</el-button>
        <el-button type="warning" :disabled="currentDisabled" @click="del">{{ $t('security.delete') }}</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFlag" :title="title" v-dialogDrag :close-on-click-modal="false" width="720px" custom-class="base-dialog">
      <GForm :config="formConfig" v-model="ruleForm" :rules="rules" ref="ruleForm" @submit="submitForm" @cancel="resetForm"></GForm>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryButtonPermissionList,
  querySysPermissionDefineById,
  saveSysPermissionDefine,
  updateSysPermissionDefine,
  deleteSysPermissionDefine
} from '@/api/system/config'
import tableTitle from '@/components/commons/TableTitle'
import baseMixin from '@/mixins/BaseMixin'

export default {
  name: 'buttonPermission',
  mixins: [baseMixin],
  data() {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'nodes',
        label: 'name'
      },
      title: '',
      currentObj: {},
      dialogFlag: false,
      dialogType:"add",
      addType: 1,
      ruleForm: {
        parentId: '',
        code: '',
        levelName: '',
        sortNum: 1,
        url: '',
        type: '',
        name: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$t('security.inputAuthName'),
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: this.$t('security.inputAuthCode'),
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: this.$t('security.selectAuthType'),
            trigger: 'change'
          }
        ]
        // desc: [
        //   {
        //     required: true,
        //     message: this.$t('security.inputAuthDesc'),
        //     trigger: 'blur'
        //   }
        // ]
      },
      height: 0,
      defaultExpandedKeys: []
    }
  },
  computed: {
    formConfig() {
      if (this.addFlag == 3) {
        return [
          { prop: 'code', type: 'input', label: this.$t('security.authCode') },
          { prop: 'name', type: 'input', label: this.$t('security.authName') },
          {
            prop: 'type',
            type: 'select',
            label: this.$t('security.authType'),
            options: [
              { label: this.$t('security.button'), value: 10102 },
              { label: this.$t('security.menu'), value: 10101 }
            ],
            disabled: true
          },
          { prop: 'sortNum', type: 'input', label: this.$t('security.sortCode') },
          { prop: 'url', type: 'input', label: this.$t('security.authUrl') },
          {
            prop: 'levelName',
            type: 'textarea',
            label: this.$t('security.authDesc')
          },
          {
            type: 'btns',
            btnConfig: [
              {
                invalid: 'submit',
                label: this.$t('common.save'),
                type: 'primary'
              },
              { invalid: 'reset', label: this.$t('common.cancel') }
            ]
          }
        ]
      }
      return [
        {
          prop: 'parentId',
          type: 'cascader',
          label: '上级权限名称',
          options: this.treeData,
          attr: {
            value: 'id',
            label: 'name',
            multiple: false,
            children: 'nodes'
          },
          disabled: true
        },
        { prop: 'code', type: 'input', label: this.$t('security.authCode') },
        { prop: 'name', type: 'input', label: this.$t('security.authName') },
        {
          prop: 'type',
          type: 'select',
          label: this.$t('security.authType'),
          options: [
            { label: this.$t('security.button'), value: 10102 },
            { label: this.$t('security.menu'), value: 10101 }
          ],
          disabled: true
        },
        { prop: 'sortNum', type: 'input', label: this.$t('security.sortCode') },
        { prop: 'url', type: 'input', label: this.$t('security.authUrl') },
        {
          prop: 'levelName',
          type: 'textarea',
          label: this.$t('security.authDesc')
        },
        {
          type: 'btns',
          btnConfig: [
            {
              invalid: 'submit',
              label: this.$t('common.save'),
              type: 'primary'
            },
            { invalid: 'reset', label: this.$t('common.cancel') }
          ]
        }
      ]
    },
    currentDisabled(){
      if(this._.isEmpty(this.currentObj)){
        return true
      }
      return false
    }
  },
  mounted() {
    this.height = this.getHeight(window, 120)
    this.getList()
  },
  components: {
    'v-tableTitle': tableTitle
  },
  methods: {
    getList() {
      queryButtonPermissionList().then(res => {
        this.treeData = res.data
        this.comExpandedKeys()
      })
    },
    comExpandedKeys() {
      this.treeData.forEach(item => {
        this.defaultExpandedKeys.push(item.id)
        if (Array.isArray(item.nodes) && item.nodes.length > 0) {
          this.defaultExpandedKeys = this.defaultExpandedKeys.concat(
            item.nodes.map(n => n.id)
          )
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.levelName.indexOf(value) !== -1
    },
    nodeClick(current, node, vueObj) {
      this.currentObj = current
    },
    addMenu() {
      this.addType = 1
      this.ruleForm.parentId = this.currentObj.parentId
      this.ruleForm.type = 10101
      this.dialogType = "add"
      this.dialogFlag = true
      this.title = '添加同级菜单'
    },
    addChildMenu() {
      this.addType = 2
      this.ruleForm.parentId = this.currentObj.id
      this.ruleForm.type = 10101
      this.dialogType = "add"
      this.dialogFlag = true
      this.title = '添加子级菜单'
    },
    addBtn() {
      this.addType = 3
      this.ruleForm.parentId = this.currentObj.id
      this.ruleForm.type = 10102
      this.dialogType = "add"
      this.dialogFlag = true
      this.title = '添加按钮'
    },
    edit() {
      if (this.currentObj.type == 10102) {
        this.addType = 3
      } else {
        this.addType = 1
      }
      this.ruleForm = this._.cloneDeep(this.currentObj)
      this.dialogType = "edit"
      this.dialogFlag = true
      this.title = this.$t('security.update')
    },
    del() {
      deleteSysPermissionDefine(this.currentObj.id).then(res => {
        this.treeData = []
        this.getList()
        this.dialogFlag = false
        this.$message.success(this.$t('app.delMes') + '!')
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate().then(valid => {
          const data = this._.cloneDeep(this.ruleForm)
          if (this.dialogType == "add") {
            if(this.addType == 3){
              saveSysPermissionDefine(data).then(res => {
                this.treeData = []
                this.getList()
                this.dialogFlag = false
                this.$message.success(this.$t('app.addMes') + '!')
              })
            }else{
              this.$post('/menuPermission/addSiblingMenu',data).then(res => {
                this.$message.success(res.returnMgr)
                this.treeData = []
                this.getList()
                this.dialogFlag = false
              })
            }
          } else if (this.dialogType == "edit") {
            updateSysPermissionDefine(data).then(res => {
              this.treeData = []
              this.getList()
              this.dialogFlag = false
              this.$message.success(this.$t('app.upMes') + '!')
            })
          } else {
            return
          }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.dialogFlag = false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>

<style lang="scss" scoped>
#buttonPermission {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .menu-tree {
    float: left;
    width: 40%;

    .menu-tree-card {
      .filter-tree {
        overflow-y: auto;
      }

      .filter-input {
        padding: 8px;
        border-bottom: 1px solid #ebeef5;
        position: relative;
      }
    }
  }

  .perDetail {
    width: 60%;
    float: right;
    padding-left: 20px;

    .detail {
      background-color: #f3f3f3;
      padding: 8px 16px;

      p {
        padding: 8px 0;
      }
    }
  }

  .btn {
    margin-top: 8px;
  }
}
</style>